<template>
  <div>
    <el-form ref="mainForm" size="medium" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12"><el-form-item label="地块名称" prop="name">
          <el-input v-model="formData.name" placeholder="名称" clearable />
        </el-form-item></el-col>
        <el-col :span="12"><el-form-item label="地块面积" prop="area">
          <el-input v-model="formData.area" type="number" placeholder="地块面积" clearable>
            <template slot="append">m²</template>
          </el-input>
        </el-form-item></el-col>
      </el-row>
      <el-form-item label="中心位置">
        <el-input v-model="formData.latlng" :disabled="true" placeholder="地图中心点位置经纬度" class="input-with-select">
          <el-button slot="append" icon="el-icon-s-promotion" @click="openPoiContainer">选择所在位置</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="描绘地块边界">
        <el-button icon="el-icon-edit" type="primary" @click="openDraw">描绘地块边界</el-button>
      </el-form-item>
      <el-form-item label="地块kml信息">
        <el-input v-model="formData.kml" type="textarea" rows="4" placeholder="地块kml信息" class="input-with-select" />
      </el-form-item>
      <el-form-item label="描述" prop="descri">
        <el-input v-model="formData.descri" rows="4" placeholder="描述" type="textarea" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('mainForm')">提交</el-button>
        <el-button @click="reset('mainForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="选择所在位置"
      :visible.sync="dialogVisible"
      modal-append-to-body
      append-to-body
      fullscreen
    >
      <location ref="mark" :map-data="mapData" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setPoi">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="规划地块kml信息"
      :visible.sync="dialogDrawVisible"
      modal-append-to-body
      append-to-body
      fullscreen
    >
      <draw :center="mapData.center" @drawFinish="drawFinish" />
    </el-dialog>
  </div>
</template>

<script>
import Location from '@/components/Location'
import Draw from './draw'
export default {
  components: {
    Location,
    Draw
  },
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogDrawVisible: false,
      mapData: {
        center: [43.735503, 122.17530],
        zoom: 16
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        if (newVal.latitude) {
          const center = [newVal.longitude, newVal.latitude]
          this.formData.latlng = center.join(',')
          this.mapData.center = center
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = {
            id: this.formData.id,
            name: this.formData.name,
            latitude: this.formData.latitude,
            longitude: this.formData.longitude,
            descri: this.formData.descri,
            area: this.formData.area,
            kml: this.formData.kml
          }
          this.$emit('submit', formData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset(formName) {
      this.$refs[formName].resetFields()
    },
    openPoiContainer() {
      this.dialogVisible = true
    },
    setPoi() {
      const gps = this.$refs.mark.getLocation()

      this.formData.latitude = gps.lat.toFixed(6)
      this.formData.longitude = gps.lng.toFixed(7)
      this.formData.center = [this.formData.latitude, this.formData.longitude]
      this.formData.latlng = this.formData.center.join(',')

      this.dialogVisible = false
    },
    openDraw() {
      this.dialogDrawVisible = true
    },
    drawFinish(latlngs) {
      this.formData.kml = latlngs
      this.dialogDrawVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
